Hi @prasanna-lmsace ,

many thanks again for working on this PR and sorry again for my long latency to review it.

I have just pushed a "Review changes" commit which is basically just housekeeping and comments / documentation.

Reviewing your changes, I did not spot major flaws on Firefox/Mac and Chrome/Mac. The outside-left and outside-right block regions are displayed on the side or wrapped properly based on the particular screen width.

As a side note: I think that the media queries / breakpoing handling for block regions have become even more complicated than they were before, but I do not have a good proposal how to simplify that, so let's keep it for now.

Having said that, I would like to highlight some breakpoint glitches where I think the proportions of the block region and the content region is not well balanced anymore.

Glitch 1a:

Browser window width: 1200px
theme_boost_union | coursecontentmaxwidth = 950px
Outside Left Region = Enabled
Outside Right Region = Enabled
theme_boost_union | blockregionoutsideleftwidth = 350px
theme_boost_union | blockregionoutsiderightwidth = 250px
theme_boost_union | outsideregionsplacement = Near Window Edges

On this window size, the outside blocks still keep their configured width.
Based on the fact that both the left and the right region are used, the content area gets really condensed:

My gut feeling is that, if (and only if) both the left and the right region is enabled and used, the blocks should already be shrunken in width to give the content area more space.

Glitch 1b:

Browser window width: 1200px
theme_boost_union | outsideregionsplacement = Next to main content area
All other settings are the same as with glitch 1a.

With this setting, the content area is even more condensed:

My change request here is the same as with glitch 1a.

Glitch 2a:

Browser window width: 990px
theme_boost_union | coursecontentmaxwidth = 950px
Outside Left Region = Enabled
Outside Right Region = Enabled
theme_boost_union | blockregionoutsideleftwidth = 350px
theme_boost_union | blockregionoutsiderightwidth = 250px
theme_boost_union | outsideregionsplacement = Next to main content area

On this window size, the outside blocks are already wrapped above and below the content area which is fine.

I have just noticed that the block regions are not fully aligned vertically with the blocks in the main area:

Would you agree that the block regions could use the same horizontal margins as the content area?

Glitch 2b:

Browser window width: 990px
theme_boost_union | outsideregionsplacement = Near Window Edges
All other settings are the same as with glitch 2a.

With this setting, it is surprising that the content area gets smaller and does not use the available width anymore:

This is different to the content area width with the "Next to main content area" setting and different to the content area width if you do not have any outside blocks enabled. I think this is just a glitch in the CSS selectors and can hopefully be solved quite quickly.

I would appreciate if you could have a look at these glitches, solve them and update the PR?
Please do not squash the PR, just add a new commit so that I just have to review your latest changes.

In addition to that, I have posted a small question to the code and would appreciate if you could answer it.

Many thanks in advance!
Alex